<template>
	<view class="mian-contain">
		<view class="head-contain"></view>
		<view class="form-contain">
			<view class="form-item">
				<view class="title">
					<span>上传编辑</span>
				</view>
				<view class="works">
					<u--form labelPosition="left" :model="uploadUser"  >
						<u-form-item label="作品名"  borderBottom labelWidth="80px" > 
							<u--input v-model="uploadUser.name" border="none" placeholder="请输入作品名"></u--input>
						</u-form-item>
						<u-form-item label="作者"  borderBottom @click="showAuthor = true;"
							 labelWidth="80px">
							<u--input v-model="uploadUser.author" disabled disabledColor="#ffffff" placeholder="请选择作者"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						
						<u-form-item label="班级"  borderBottom @click="showClass = true;"
							 labelWidth="80px">
							<u--input v-model="uploadUser.class" disabled disabledColor="#ffffff" placeholder="请选择班级"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item   borderBottom labelWidth="80px" >
							<u-button type="primary" text="上传" @click="handleUpload"></u-button>
						</u-form-item>
					</u--form>
				</view>
			</view>

		</view>
		<u-action-sheet :show="showAuthor" :actions="actions" title="请选择作者"
			@close="showAuthor = false" @select="authorSelect">
		</u-action-sheet>
		<u-action-sheet :show="showClass" :actions="actionsClass" title="请选择班级"
			@close="showClass = false" @select="classSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tarVal: 1,
				showAuthor: false,
				showClass: false,
				uploadUser:{
					name: '',
					class: '',
					author:'',
				},
				
				actions: [{
						name: '小白',
					},
					{
						name: '小黑',
					},
					{
						name: '小新',
					},
				],
				actionsClass: [{
						name: '水墨画A班',
					},
					{
						name: '中国画A班',
					},
					{
						name: '水彩画C班',
					},
				],
				radio: '',
				switchVal: false
			}
		},
		created() {
			console.log("开始获取");
		},
		methods: {
			authorSelect(e) {
				console.log(e.name);
				this.uploadUser.author=e.name
			},
			classSelect(e) {
				console.log(e.name);
				this.uploadUser.class=e.name
			},
			handleUpload(){
				console.log("开始上传:");
				console.log(this.uploadUser);
			},
		}


	}
</script>

<style lang="scss" scoped>
	.mian-contain {

		.head-contain {
			height: 10vh;
			width: 100%;
			background-color: #2C57F6;
		}

		.form-contain {
			height: 70vh;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.form-item {
				height: 50%;
				width: 80%;
				border-radius: 12px;
				box-sizing: border-box;
				padding: 5% 10%;
				border: 1px solid gray;
				.title {
					font-size: 22px;
				}

				.works {}

				.button-item {}
			}
		}

		
	}
</style>